<template>
  <el-form
    :model="model"
    ref="formControl"
    :inline="false"
    class="demo-form-inline"
    :label-suffix="labelSuffix"
    :label-width="labelWidth"
    :size="size"
    v-bind="$attrs"
  >
    <el-tabs
      v-model="tabIndex"
      type="border-card"
    >
      <el-tab-pane
        v-for="(item, index) in cardOrder"
        :key="'tabs_' + index"
        :label="item.title"
        :name="item.title"
      >
        <base-item
          :colOrder="item.colIds"
          :itemMeta="itemMeta"
          :ruleMeta="ruleMeta"
          :showCol="showCol"
          :formColSpan="formColSpan"
          :model="model"
          :size="size"
          >
        </base-item>
      </el-tab-pane>
    </el-tabs>
  </el-form>
</template>

<script lang="ts">
/* eslint-disable vue/no-setup-props-destructure */
  import { defineComponent, ref } from 'vue'
  import { ElForm, ElTabPane, ElTabs } from 'element-plus'
  // 封装 el-form-item
  import baseItem from './base-item.vue'

  // 表单控件的属性 
  import { formProps, formController } from '../map'

  export default defineComponent({
    name: 'el-from-div',
    components: {
      baseItem,
      ElForm, ElTabPane, ElTabs
    },
    props: {
      ...formProps
    },
    setup (props, context) {
      // console.log('表单控件的props：', props)

      // 获取 $ref
      const formControl = ref(null)
      
      const {
        formMeta,
        itemMeta,
        model,
        partModel
      } = props

      // 调用表单的控制类
      const {
        formColSpan, // 确定组件占位
        showCol, // 是否显示字段的对象
        setFormColShow, // 设置组件联动
      } = formController(formMeta, itemMeta, model, partModel)

      // 获取分栏信息
      const { subMeta } = formMeta
 
      const cardOrder = subMeta.cols ?? []

      // tab 
      const tabIndex = ref(cardOrder[0].title)

      return {
        ...formMeta,
        itemMeta,
        cardOrder,
        tabIndex,
        showCol, // 是否显示字段的对象
        formColSpan, // 确定组件占位
        // 函数
        setFormColShow, // 设置组件联动
        //
        formControl // 获取表单dom
      }
    }
  })
</script>